<!--

    Copyright (C) 2015 The Gravitee team (http://gravitee.io)

    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.
    You may obtain a copy of the License at

            http://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing, software
    distributed under the License is distributed on an "AS IS" BASIS,
    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    See the License for the specific language governing permissions and
    limitations under the License.

-->
<div class="documentation-pages-list__container">
  <table
    mat-table
    [dataSource]="dataSource"
    class="documentation-pages-list__table gio-table-light"
    [attr.aria-label]="'List of API Pages'"
  >
    <ng-container matColumnDef="name">
      <th mat-header-cell *matHeaderCellDef class="documentation-pages-list__table__name__header">Name</th>
      <td mat-cell *matCellDef="let page">
        <ng-container *ngIf="page.type === 'FOLDER'">
          <div class="documentation-pages-list__table__name" (click)="onGoToFolder.emit(page.id)">
            <mat-icon svgIcon="gio:folder"></mat-icon>
            <p gioTooltipOnEllipsis>{{ page.name }}</p>
          </div></ng-container
        >
        <ng-container *ngIf="page.type !== 'FOLDER'">
          <ng-template #pageName>
            <mat-icon svgIcon="gio:page"></mat-icon>
            <p gioTooltipOnEllipsis>{{ page.name }}</p>
            <img
              [ngSrc]="getLogoForPageType(page.type)"
              height="24"
              width="24"
              [alt]="getTitleForPageType(page.type).toLowerCase() + ' logo'"
              [matTooltip]="getTooltipForPageType(page.type)"
            />
          </ng-template>
          <div
            class="documentation-pages-list__table__name"
            *gioPermission="{ anyOf: ['api-documentation-u', 'api-documentation-r'] }"
            (click)="onEditPage.emit(page.id)"
          >
            <ng-container *ngTemplateOutlet="pageName"></ng-container>
          </div>
          <div
            class="documentation-pages-list__table__name no-pointer"
            *gioPermission="{ noneOf: ['api-documentation-u', 'api-documentation-r'] }"
          >
            <ng-container *ngTemplateOutlet="pageName"></ng-container></div
        ></ng-container>
      </td>
    </ng-container>
    <ng-container matColumnDef="status">
      <th mat-header-cell *matHeaderCellDef>Status</th>
      <td mat-cell *matCellDef="let page" class="documentation-pages-list__table__status">
        <ng-container *ngIf="page.type != 'FOLDER'">
          <span *ngIf="page.published" class="gio-badge-success"> Published </span>
          <span
            *ngIf="page.published && page.generalConditions"
            class="gio-badge-neutral"
            matTooltip="Used by at least one plan as General Conditions"
            ><mat-icon svgIcon="gio:book-open"></mat-icon
          ></span>
          <span *ngIf="!page.published" class="gio-badge-neutral"> Unpublished </span>
        </ng-container>
        <ng-container *ngIf="page.type === 'FOLDER'">
          <span *ngIf="page.hidden" class="gio-badge-neutral" matTooltip="Must contain published pages to be shown"> Hidden </span>
        </ng-container>
      </td>
    </ng-container>
    <ng-container matColumnDef="visibility">
      <th mat-header-cell *matHeaderCellDef>Visibility</th>
      <td mat-cell *matCellDef="let page" class="documentation-pages-list__table__status">
        <span class="gio-badge-neutral"> {{ page.visibility | titlecase }} </span>
      </td>
    </ng-container>
    <ng-container matColumnDef="lastUpdated">
      <th mat-header-cell *matHeaderCellDef>Last Updated</th>
      <td mat-cell *matCellDef="let page">
        {{ page.updatedAt | date: 'medium' }}
      </td>
    </ng-container>
    <ng-container matColumnDef="actions">
      <th mat-header-cell *matHeaderCellDef>Actions</th>
      <td mat-cell *matCellDef="let page; let i = index">
        <div class="documentation-pages-list__table__actions">
          <ng-container *gioPermission="{ anyOf: ['api-documentation-u'] }">
            <ng-container *ngIf="page.type === 'FOLDER'">
              <button mat-icon-button (click)="onEditFolder.emit(page)" aria-label="Edit folder" matTooltip="Edit folder">
                <mat-icon svgIcon="gio:edit-pencil"></mat-icon>
              </button>
              <div *ngIf="pagesIncludeNonFolders" class="empty-icon-button"></div>
            </ng-container>

            <ng-container *ngIf="page.type !== 'FOLDER'">
              <button mat-icon-button (click)="onEditPage.emit(page.id)" aria-label="Edit page" matTooltip="Edit page">
                <mat-icon svgIcon="gio:edit-pencil"></mat-icon>
              </button>
              <ng-container *ngIf="!page.published">
                <button mat-icon-button (click)="onPublishPage.emit(page.id)" matTooltip="Publish page" aria-label="Publish page">
                  <mat-icon svgIcon="gio:upload-cloud"></mat-icon></button
              ></ng-container>
              <ng-container *ngIf="page.published">
                <button
                  (click)="onUnpublishPage.emit(page.id)"
                  [disabled]="page.generalConditions"
                  mat-icon-button
                  [matTooltip]="page.generalConditions ? 'Cannot unpublish if used as General Conditions' : 'Unpublish page'"
                  aria-label="Unpublish page"
                >
                  <mat-icon svgIcon="gio:cloud-unpublished"></mat-icon>
                </button>
              </ng-container>
            </ng-container>

            <!-- insert empty slot so that flex keeps everything aligned when publish icon is missing -->
            <div *ngIf="page.type === 'FOLDER'"></div>

            <button
              mat-icon-button
              (click)="onMoveUp.emit(page)"
              [disabled]="i === 0 || page.order === 0"
              aria-label="Move page up"
              [matTooltip]="page.type === 'FOLDER' ? 'Move folder up' : 'Move page up'"
            >
              <mat-icon svgIcon="gio:arrow-up"></mat-icon>
            </button>
            <button
              mat-icon-button
              (click)="onMoveDown.emit(page)"
              [disabled]="i === dataSource.data.length - 1"
              aria-label="Move page down"
              [matTooltip]="page.type === 'FOLDER' ? 'Move folder down' : 'Move page down'"
            >
              <mat-icon svgIcon="gio:arrow-down"></mat-icon>
            </button>
          </ng-container>

          <button
            mat-icon-button
            *gioPermission="{ anyOf: ['api-documentation-d'] }"
            (click)="onDeletePage.emit(page)"
            [disabled]="page.generalConditions"
            aria-label="Delete page"
            [matTooltip]="
              page.generalConditions
                ? 'Cannot delete if used as General Conditions'
                : page.type === 'FOLDER'
                  ? 'Delete folder'
                  : 'Delete page'
            "
          >
            <mat-icon svgIcon="gio:trash"></mat-icon>
          </button>
        </div>
      </td>
    </ng-container>
    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
  </table>
</div>
